<template>
	<div class="goodslist">
		<div class="goods-item" v-for="item in goodslist" :key="item.id" @click="goDetail(item.id)">
			<img :src="item.img_url" alt="">
			<h1 class="title"> {{item.title}} </h1>

			<div class="info">
				<p class="price">
					<span class="now">￥{{ item.sell_price }}</span>
					<span class="old">￥{{ item.market_price }}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{ item.stock_quantity }}件</span>
				</p>
			</div>
		</div>

		<mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
	</div>
</template>


<script>
	export default {
		data() {
			return {
				pageindex: 1, //分页的页数
				goodslist: []  //存放商品信息的数据
			}
		},
		created() {
			this.getGoodsList();
		},
		methods: {
			getGoodsList() { //获取商品列表
				this.$http.get('api/getgoods?pageindex=' + this.pageindex ).then(result => {
					if (result.body.status === 0) {
						// this.goodslist = result.body.message
						// 实现加载更多功能 拼接
						this.goodslist = this.goodslist.concat(result.body.message)

					} else {

					}
				})
			},
			getMore() {
				this.pageindex++
				this.getGoodsList() //增加页码，再调用获取数据
			},
			// 使用编程式导航，先创建一个事件函数，在函数里调用路由
			goDetail(id) {
				// 使用JS的形式进行路由导航

      			// 注意： 一定要区分 this.$route 和 this.$router 这两个对象，
      			// 其中： this.$route 是路由【参数对象】，所有路由中的参数， params, query 都属于它
      			// 其中： this.$router 是一个路由【导航对象】，用它 可以方便的 使用 JS 代码，实现路由的 前进、后退、 跳转到新的 URL 地址
      			this.$router.push({ name: 'goodsinfo', params: { id } })
			}
		}
	}
	
</script>

<style lang="scss" scoped>
	.goodslist {
		display: flex;
		flex-wrap: wrap;
		padding: 7px;
		display: flex;
		justify-content: space-between;
		.goods-item {
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 3px 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 293px;
			img {
				width: 100%;
			}
			.title {
				font-size: 14px;
			}
			.info {
				background: #eee;
				margin: 3px;
				p {
					margin: 0;
					padding: 5px;
				}
				.price {
					
					.now {
						color: red;
						font-weight: bold;
						font-size: 16px;
					}
					.old {
						text-decoration: line-through;
						font-size: 12px;
						margin: 0 15px;
					}
				}
				.sell {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
	
</style>